<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

import { getTaskInfo, saveTaskFn } from '@fl/api/anjutong/tasks'
import { reactive, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import type { saveTaskAjaxType, saveTaskType } from './type/index'

import { SaveTask, selectData } from './type/index'

const route = useRoute()
const router = useRouter()
let saveTask = reactive<any>(new SaveTask())
const selectData1 = reactive(selectData) // 任务状态临时数据

watch(route, (val: any) => {
    if (val.query?.row) {
        init(val.query?.row)
    }
}, {
    deep: true,
    immediate: true,
})

// 编辑数据回显
function init(row: any) {
    const target = JSON.parse(row)
    getTaskInfo(target.id).then((res) => {
        saveTask.taskName = res.taskName
        saveTask.taskId = res.taskNo
        saveTask.taskRemark = res.taskDesc
        saveTask.taskState = res.status ? 1 : 0
        saveTask.id = res.id

        if (res?.point) {
            saveTask.integralCheck = true
            saveTask.integralInp = res.point
        }

        if (res?.growth) {
            saveTask.growCheck = true
            saveTask.growInp = res.growth
        }
    })
}

// 验证
const rule = {
    taskId: [
        { message: '请输入任务编号', required: true, trigger: 'blur' },
    ],
    taskName: [
        { message: '请输入任务名称', required: true, trigger: 'blur' },
    ],
    taskRemark: [
        { message: '请输入任务说明', required: true, trigger: 'blur' },
    ],
    taskState: [
        { message: '请输入选择任务状态', required: true, trigger: 'blur' },
    ],
}
const rules = reactive<FormRules<saveTaskType>>(rule)
const ruleFormRef = ref<FormInstance>()
async function getSaveTask(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate((valid) => {
        if (valid)
            saveAjax()
    })
}
function saveAjax() {
    if (saveTask.timeRewardCheck && !saveTask.timeRewardInp) {
        ElMessage.warning('请输入限制每日奖励次数')
        return
    }
    if (saveTask.totalRewardCheck && !saveTask.timeRewardInp) {
        ElMessage.warning('请输入限制总奖励次数')
        return
    }

    if (saveTask.integralCheck && !saveTask.integralInp) {
        ElMessage.warning('请输入任务积分值')
        return
    }

    if (saveTask.growCheck && !saveTask.growInp) {
        ElMessage.warning('请输入任务成长值')
        return
    }

    const param: any = {
        growth: saveTask.growCheck ? saveTask.growInp : 0,
        point: saveTask.integralCheck ? saveTask.integralInp : 0,
        status: saveTask.taskState,
        taskDesc: saveTask.taskRemark,
        taskName: saveTask.taskName,
        taskNo: saveTask.taskId,
        taskType: route.query.type,
    }

    if (saveTask?.id) {
        param.id = saveTask.id
    }

    const type: any = saveTask?.id ? 1 : ''

    saveTaskFn(param, type).then((res) => {
        if (res.code === 200) {
            ElMessage.success('编辑成功')
            router.push('/member-center/task/save-task-list')
        }
    })
}

function cancel() {
    saveTask = {
        growCheck: false, // 奖励设置-成长值-选择框
        growInp: '', // 奖励设置-成长值-输入框
        integralCheck: false, // 奖励设置-积分-选择框
        integralInp: '', // 奖励设置-积分-输入框
        selectType: '', // 触发下来框
        setCond: false, // 触发条件
        setNum: '', // 触发次数限制
        taskId: '', // 任务编号
        taskName: '', // 任务名称
        taskRemark: '', // 任务说明
        taskState: 1, // 任务状态
        timeRewardCheck: false, // 奖励限制-每日奖励-选择框
        timeRewardInp: '', // 奖励限制-每日奖励-输入框
        totalRewardCheck: false, // 奖励限制-总奖励-选择框
        totalRewardInp: '', // 奖励限制-总奖励-输入框
    }
    router.push('/member-center/task/save-task-list')
}
</script>

<template>
    <div class="task">
        <el-form ref="ruleFormRef"
                 :rules="rules"
                 :model="saveTask"
        >
            <el-form-item label="任务名称"
                          prop="taskName"
            >
                <el-input v-model="saveTask.taskName"
                          placeholder="请输入任务名称"
                          style="width: 400px"
                />
            </el-form-item>

            <el-form-item label="任务编号"
                          prop="taskId"
            >
                <el-input v-model="saveTask.taskId"
                          placeholder="请输入任务编号"
                          style="width: 400px"
                />
            </el-form-item>

            <el-form-item label="任务说明"
                          prop="taskRemark"
            >
                <el-input v-model="saveTask.taskRemark"
                          type="textarea"
                          placeholder=""
                          style="width: 400px"
                />
            </el-form-item>

            <el-form-item label="任务状态"
                          prop="taskState"
            >
                <el-select v-model="saveTask.taskState"
                           style="width: 400px"
                >
                    <el-option v-for="item in selectData1"
                               :key="item.id"
                               :label="item.label"
                               :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="奖励设置"
                          label-position="top"
            >
                <p class="mb-10 ml-10 w-full">
                    <el-checkbox v-model="saveTask.integralCheck"
                                 style="width: 78px;"
                                 label="积分"
                                 size="large"
                    />

                    <el-input v-model="saveTask.integralInp"
                              style="width: 400px"
                              :disabled="!saveTask.integralCheck"
                              placeholder="请输入任务积分值"
                              oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=''} if(value>999999999){value=999999999}"
                    />
                </p>

                <p class="ml-10 w-full">
                    <el-checkbox v-model="saveTask.growCheck"
                                 style="width: 68px;"
                                 label="成长值"
                                 size="large"
                    />

                    <el-input v-model="saveTask.growInp"
                              :disabled="!saveTask.growCheck"
                              placeholder="请输入任务成长值"
                              class="m-r"
                              style="width: 400px"
                              oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=''} if(value>999999999){value=999999999}"
                    />
                </p>
            </el-form-item>
        </el-form>

        <!-- <el-form label-position="top">
            <el-form-item label="触发时间">
                <div class="m-r">
                    触发条件<el-switch v-model="saveTask.setCond"
                                   class="m-r"
                    />

                    <p v-if="saveTask.setCond">
                        <el-cascader v-model="saveTask.selectType"
                                     :options="setCondData1"
                        />
                    </p>
                </div>
            </el-form-item>

            <el-form-item label="触发次数限制">
                <p class="m-r">
                    每触发<el-input v-model="saveTask.setNum"
                                 placeholder="请输入次数"
                                 style="width: 400px"
                                 class="m-r"
                                 oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=''} if(value>999999999){value=999999999}"
                    />次，可获得奖励。
                </p>
            </el-form-item>

            <el-form-item label="奖励设置">
                <p style="min-width: 100%; margin-bottom: 20px"
                   class="m-r"
                >
                    <el-checkbox v-model="saveTask.integralCheck"
                                 label="积分"
                                 size="large"
                    />

                    <el-input v-model="saveTask.integralInp"
                              :disabled="!saveTask.integralCheck"
                              placeholder="请输入任务积分值"
                              class="m-r"
                              style="width: 412px"
                              oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=''} if(value>999999999){value=999999999}"
                    />
                </p>

                <br>

                <p class="m-r">
                    <el-checkbox v-model="saveTask.growCheck"
                                 label="成长值"
                                 size="large"
                    />

                    <el-input v-model="saveTask.growInp"
                              :disabled="!saveTask.growCheck"
                              placeholder="请输入任务成长值"
                              class="m-r"
                              style="width: 400px"
                              oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=''} if(value>999999999){value=999999999}"
                    />
                </p>
            </el-form-item>

            <el-form-item label="奖励限制">
                <p style="min-width: 100%; margin-bottom: 20px"
                   class="m-r"
                >
                    <el-checkbox v-model="saveTask.timeRewardCheck"
                                 label="限制每日奖励次数"
                                 size="large"
                    />

                    <el-input v-model="saveTask.timeRewardInp"
                              :disabled="!saveTask.timeRewardCheck"
                              placeholder="请输入次数"
                              class="m-r"
                              style="width: 333px"
                              oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=''} if(value>999999999){value=999999999}"
                    />次
                </p>

                <p class="m-r">
                    <el-checkbox v-model="saveTask.totalRewardCheck"
                                 label="限制总奖励次数"
                                 size="large"
                    />

                    <el-input v-model="saveTask.totalRewardInp"
                              :disabled="!saveTask.totalRewardCheck"
                              placeholder="请输入次数"
                              class="m-r"
                              style="width: 346px"
                              oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=''} if(value>999999999){value=999999999}"
                    />次
                </p>
            </el-form-item>
        </el-form> -->

        <div class="task-btn">
            <el-button type="primary"
                       @click="getSaveTask(ruleFormRef)"
            >
                确定
            </el-button>

            <el-button type="primary"
                       @click="cancel"
            >
                取消
            </el-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.task {
    padding: 20px 20px 20px 40px;
    background: #fff;
    position: relative;
}

.task-btn {
    position: absolute;
    right: 20px;
    bottom: 40px;
}

:deep(.el-form-item__label) {
    font-weight: 700;
    font-size: 16px;
    color: black;
}

:deep(.el-checkbox__label) {
    font-weight: 700;
    font-size: 14px;
}

.m-r {
    margin-left: 10px;
}
</style>
